<template>
	<view>
		<view class="w345" v-for="item in 2" style="margin-top: 20rpx;">
				<view class="h49 fs14" style="height: 98rpx;line-height: 98rpx;">
					<!-- 订单编号 -->
					<text>订单编号：12346798</text>
					<text class="fs12" style="position: absolute;right: 5%;color: #A4A4A4;">待配送</text>
				</view>
				<view class="h49 fs13" style="height: 242rpx;">
					<view class="Shwz" style="margin-top: 28rpx;position: relative;">
						<image src="../../../static/b16c8652-8cd5-4c9d-a180-8ddf523503eb.png" mode=""></image>
						<text style="position: absolute;left: 60rpx;">海淀区栖霞路36号门面</text>
						<view class="fs12 Jl" style="width: 100%;position: absolute;top: 40rpx;">
							<text style="color: #FF2C2C;margin-left: 60rpx;">距离 800m</text>
							<image src="../../../static/iconfh.png" mode=""></image>
						</view>
					</view>
					<view class="Shwz" style="margin-top:60rpx;position: relative;">
						<image src="../../../static/41a54e35-1863-47b1-9580-01eebff61b00.png" mode=""></image>
						<text style="position: absolute;left: 60rpx;">海淀区栖霞路阿斯顿小区 3-301</text>
						<view class="fs12 Jl" style="width: 100%;position: absolute;top: 40rpx;">
							<text style="color: #FF2C2C;margin-left: 60rpx;">距离 800m</text>
							<!-- <image src="../../../static/iconfh.png" mode=""></image> -->
						</view>
					</view>
				</view> 
				<view class="h49 fs13" style="height: 180rpx; margin-top: 16rpx;">
					<view class="GRxx" style="position: relative;">
						<image class="JDtx fs13" src="../../../static/4a8323ca-7ccb-49dc-98f0-737a8713d565.png" mode=""></image>
						<text style="position: absolute;left: 60rpx; color: #333333;">李女士 188****4567</text>
						<image class="GRdh" src="../../../static/icondianhua.png" mode=""></image>
					</view>
					<view class="GRsd fs14" style="padding-top: 46rpx;position: relative;">
						<text>预计</text><text style="color: #FF2C2C;">52分钟内</text><text>送达</text>
						<view class="GRjiedan" @click="show=true">扫码取餐</view>
					</view>
				</view>
			</view>
			<u-mask :show="show" @click="show = false">
				<image class="cxsm" src="../../../static/iconbufu.png" mode=""></image>
			</u-mask>
			<view style="height: 350rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.w345 {
		width: 690rpx;
		margin: auto;
		border-radius: 10rpx;
		background: #FFFFFF;
	}
.cxsm{
	width: 532rpx;
	height: 574rpx;
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
}
	.h49 {
		width: 90%;
		margin: auto;
		color: #333333;
		border-bottom: 1rpx solid #F5F5F5;
		position: relative;
	}

	.Shwz>image {
		width: 42rpx;
		height: 50rpx;
	}

	.Jl>image {
		width: 10rpx;
		height: 20rpx;
		position: absolute;
		right: 8%;
		top: 8rpx;
	}
	.JDtx{
		width: 38rpx;
		height: 38rpx;
	}
	.GRdh{
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		right: 8%;
		top: 8rpx;
	}
	.GRjiedan{
		width: 204rpx;
		height: 54rpx;
		text-align: center;
		line-height: 54rpx;
		color: #FFFFFF;
		background: #24BC81;
		border-radius: 27rpx;
		position: absolute;
		right: 7%;
		top: 40rpx;
	}
</style>
